<template>
	<view>
		<u-navbar :is-back="true" title=" " :background="{ background: '#ffffff'}"
		:border-bottom="false"></u-navbar>
		<!-- 展示微信号 -->
		<view v-if="type==0"  style="margin-top: 180rpx;">
			<view class="u-flex u-row-center u-col-center">
				<view>
					<u-image src="/static/image/chat/WEIXIN.png" width="130rpx" height="130rpx"></u-image>
				</view>
			</view>
			<view class="u-m-t-60">
				<view class="u-flex u-row-center u-col-center">
					<view style="font-size:44rpx;font-weight: bold;width:70%;text-align: center;" class="u-line-1">
						<text>微信号:</text>
						<text>{{vuex_userInfo.chatNumber}}</text>
					</view>
				</view>
				<view style="text-align: center;font-size: 34rpx;color: #000000;margin-top: 10rpx;">
					<view>
						<text>微信号是帐号的唯一凭证，一年只能修改</text>
					</view>
					<view>
						<text>一次。</text>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 70%;" class="u-flex u-row-center u-col-center">
				<view style="width: 400rpx;text-align: center;font-size: 34rpx;">
					<view @click="openChatNumberModel()" class="u-m-t-30" style="background-color: #dddddd;color: #000000;border-radius: 12rpx;padding: 20rpx 40rpx;">
						<text>修改微信号</text>
					</view>
				</view>
			</view>
			
			<u-modal 	v-model="chatNumberModel"
						title="修改微信号" show-cancel-button :show-confirm-button="errorMessage.length<1"
						@confirm="comfirmUpdatechatNumber()" @cancel="cancelUpdatechatNumber()">
					<view class="slot-content">
						<u-field :error-message="errorMessage" @input="onInputChatNumber"	
							v-model="updatedchatNumber" label-width="10" 	label="" placeholder="请填写账号"></u-field>
					</view>
			</u-modal>
		</view>
		<view  v-if="type==1" style="margin-top: 200rpx;">
			<view style="text-align: center;">
				<view class="u-flex u-row-center u-col-center">
					<view style="font-size:44rpx;font-weight: bold;">
						<text>已绑定手机号:</text>
						<text>{{formatTel()}}</text>
					</view>
					<view style="color: #2d5675;margin-left: 10rpx;">
						<text v-if="showMobile==false" @click="showMobile=true">显示</text>
						<text v-if="showMobile==true"  @click="showMobile=false">隐藏</text>
					</view>
				</view>
				<view style="text-align: center;font-size: 34rpx;color: #606266;margin-top: 10rpx;">
					<view>
						<text>上传你的手机通讯录后，可了解通讯录中</text>
					</view>
					<view>
						<text>哪些朋友注册了帐号。</text>
					</view>
				</view>
			</view>
			<view style="margin-top: 80%;" class="u-flex u-row-center u-col-center">
				<view style="width: 400rpx;text-align: center;font-size: 34rpx;">
					<view style="background-color: #19be6b;color:#ffffff;border-radius: 12rpx;padding: 20rpx 40rpx;">
						<text>上传通讯录找朋友</text>
					</view>
					<view  class="u-m-t-30" style="background-color: #dddddd;color: #000000;border-radius: 12rpx;padding: 20rpx 40rpx;">
						<text>更换手机号</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMobile:false,
				type:0,
				chatNumberModel:false,
				errorMessage:'',
				updatedchatNumber:'',
				currentUser:'',
			};
		},
		onLoad:function(option){
			if(option.type){
				this.type=option.type;
			}
			this.currentUser=this.vuex_userInfo;
			//this.updatedchatNumber=this.currentUser.chatNumber;
		},
		methods:{
			formatTel:function(){
				let that=this;
				let tel= that.vuex_userInfo.mobile;
				if(that.showMobile==false){
					let first= tel.substring(0,3);
					let last= tel.substring(9,11);
					return first+'******'+last;
				}
				else{
					return tel;
				}
			},
			openChatNumberModel:function(){
				this.chatNumberModel=true;
				this.updatedchatNumber=this.currentUser.chatNumber;
			},
			comfirmUpdatechatNumber:function(){
				if(this.updatedchatNumber.length<1){
					this.globalUtil.utilAlert("不能为空!");
					this.openChatNumberModel();
				}else{
					this.currentUser.chatNumber=this.updatedchatNumber;
					this.updateUserInfo();
				}
			},
			cancelUpdatechatNumber:function(){
				this.chatNumberModel=false;
			},
			onInputChatNumber:function(value){
				console.log("value",value);
				if(value.length>0){
					let reg = /[\u4e00-\u9fa5]+/g;
				    let chArr=value.match(reg);
					if(chArr!=null&&chArr.length>0){
						//this.globalUtil.utilAlert("不支持中文!");
						this.errorMessage="不支持中文!";
						return;
					}else{
						this.errorMessage="";
						return;
					}
				}
			},
			//修改用户信息
			updateUserInfo:function(){
				let that=this;
				let param=that.currentUser;
				that.$u.api.imUser.updateUserInfo(param).then(res => {
					if(res.code==200){
						that.globalUtil.utilAlert("修改成功!");
						that.$u.vuex('vuex_userInfo',param);
					}
				})
			},
		}
	}
</script>

<style lang="scss">

</style>
